<template>
  <div>
    <van-nav-bar title="新增地址" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import { APIaddAddress } from "@/http/index.js";
import Vue from "vue";
import { areaList } from "@vant/area-data";
import { AddressEdit } from "vant";

Vue.use(AddressEdit);

export default {
  name: "AddressAdd",
  props: [],
  data() {
    return {
      areaList,
    };
  },
  methods: {
    onSave(val) {
      //console.log(val)
      let addObj = {
        areaCode: val.areaCode,
        cityName: val.city,
        defaultFlag: val.isDefault ? 1 : 0,
        detailAddress: val.addressDetail,
        postalCode: val.postalCode,
        provinceName: val.province,
        regionName: val.county,
        userName: val.name,
        userPhone: val.tel,
      };
      APIaddAddress(addObj).then((res) => {
        if (res.resultCode == 200) {
          Toast("新增地址成功");
          this.$router.push("/addressList");
        }
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"></style>
